$font-colorOne: #ffd200;
$font-colorTop: #07a1e4;
$font-colorNav: #F66C07;
$font-colorThree: #5ef5f9;
$backgring-color: #03214b;
$font-sizeSM: 12px;
$font-sizeS: 16px;
$font-sizeM: 18px;
$font-sizeLS: 24px;
$font-sizeL: 22px;

* { margin:0;padding:0;box-sizing:border-box;}
ul {  list-style: none; }
ul > li { display: inline; }

#Boxs {
  width:100%;
  height:100%;
  min-width:1200px;
  min-height:600px;
  overflow:hidden;
  color: #fff;
  position:relative;
  font-family:"Microsoft Yahei", Arial, sans-serif;
  background:rgb(40, 30, 47) url("assets/tmp/img/bi/backgroundCL.png") 0 0 / 100% 100% no-repeat;
}

/* layout */
.margin-t {margin-top: 10px}
.margin-l { margin-left: 20px;}
#content-header {width: 100%;}
.todaytimes {display: flex;color: #fff;font-size: $font-sizeL;text-align: center;position: relative;left: 31%;
  p {width: 26px;height: 32px;line-height: 32px;margin-left: 2px;background-color: $backgring-color;}
}
.content-tit { display: flex; margin-top: 5px;
  .head-logo {margin-right: 20px;cursor:pointer; }
  .head-nav {background: linear-gradient(to right, rgb(5,30,72) , rgba(15,26,64,0.5));display: flex;
    .head-top{width: 86px;text-align: center;line-height: 43px;
      p {height: 34px;color: $font-colorTop;font-size: $font-sizeM;}
      b {font-weight: normal;height: 43px;font-size: $font-sizeL;}
    }
  }
}
#content-box { position:absolute;top:10px;bottom:0px;left:20px;right:20px;}
#flexCon {
  height:97%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex-row {
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-cell-a{-webkit-flex:2.5;-ms-flex:2.5;flex:2.5;}
.flex-cell-ar{-webkit-flex:3;-ms-flex:3;flex:3; background:  url("assets/tmp/img/bi/clD-bak.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-b{-webkit-flex:3;-ms-flex:3;flex:3; border: 2px solid rgba(77,176,219,1)}
.flex-cell-c{-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-cell-d{-webkit-flex:3;-ms-flex:3;flex:3;}
.chart-wrapper {position:relative;height:100%;}
.chart-wrapper-a {position:relative;height:15%;}
.chart-wrapper-b {position:relative;height:85%;}
.chart-table { position:relative; top: 0; left:2px; display: flex; min-height: 33%;}
.title-table {display: flex;}

.left-tables {padding: 0px 12px;
  .left-title {padding-top: 5px;display: flex;}
  .left-t {font-size: 25px; cursor:pointer;}
  .left-p {position: relative;left: 62%}
  .tab-div {width: 818px;height: 2px;background: rgba(77,176,219,1);border-radius: 1px;margin-bottom: 5px;margin-left: 8px;}
  p {color: $font-colorThree;font-size: $font-sizeM;padding-left: 8px;}
  td {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: $font-sizeS;padding: 0px 0px 2px 8px;}
  thead > tr > td {color: $font-colorTop;}
  i {font-style: normal;}
  .logo {width: 21px;height: 21px;vertical-align: sub;}
  .logo-bj {color: #B2DDF6;background-color: rgba(2,50,127,0.8);border-radius: 2px;width: 40px;height: 20px;display: inline-block;text-align: center;line-height: 19px;margin-right: 2px;}
  .warning {color: $font-colorNav;}
  .error {color: $font-colorNav;}
  .reportData:focus {background: rgba(0, 73, 134, 1);color: $font-colorThree;}
  .checkData, .checkData:focus {color: $font-colorNav;}

}

.right-top {margin: 10px 0px 0px 8px;
  .box-icon {display: flex;text-align: center;position: fixed;right: 2%;top: 39px;
    .icon {padding: 0px 11px;
      .icon-img {width: 38px;height: 38px;}
      .icon-yes {width: 20px;height: 14px;vertical-align: top;}
    }
  }
  .box-logo {margin-right: 15px;
    .logo-icon {width: 57px;height: 57px;vertical-align: super;
      img{width: 57px; height:57px;}
    }
  }
  .logo-tit {height: 24px;background: rgba(1,60,149,0.8);border-radius: 2px;padding: 1px 12px;margin-left: 10px;margin-top: 3px;}
  .car-num {font-size: 21px;}
  .car-info {font-size: $font-sizeM;font-family: MicrosoftYaHeiLight;font-weight:300;color:rgba(248,249,252,1);}
}

.right-tabs {display: flex;overflow: hidden;margin: 0px 8px;font-size: $font-sizeS;
  .box {cursor:pointer;margin-bottom: 8px;background:rgba(0,104,183,0.2);border-radius:4px;padding: 1px 10px;
    &:nth-child(2) {padding-top: 5px;min-height: 30px;}
    span {color: #a4a5a2;}
  }
}

.box-top {margin: 0px 8px 8px 8px;background:rgba(0,104,183,0.2);border-radius:4px;padding: 1px 8px;
  .tit {display: flex;position: relative;
    .tit-col {width:10px;height:22px;margin-right: 5px;top: 6px;position: relative;background-color: #12F442;}
    .tit-tit {font-size: $font-sizeL;margin-right: 5px;}
  }

  .fwgd { font-size: $font-sizeS;margin: 0px 0px 5px 0px;max-height: 139px;background:rgba(2,11,46,0.5);color: #fff;border-radius: 5px;
    .tab-fwgd {
      .fwgd-head {display: flex;background: #020B2E;line-height: 28px;color: #A4A4A4;
        div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        :first-child {width: 3%;margin-left: 12px;}
        :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(3) {width: 12%;}
      }
      .fwgd-sp {padding: 2px;display: flex;table-layout: fixed;
        div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        :first-child {width: 3%;margin-left: 12px;}
        :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(3) {width: 12%;}
      }
    }
  }
}

.main-copy {text-align: center; font-size:$font-sizeSM; color: $font-colorOne }




/* 1920/1080/1600 分辨率的显示器 */
@media (max-width:1900px) {
  .margin-l { margin-left: 15px;}
  .margin-t { margin-top: 5px;}
  #content-box {top:5px;}
  .todaytimes {font-size: $font-sizeM;left: 26%;
    p { width: 22px;height: 23px;line-height: 23px;}
  }
  .content-tit {
    .head-logo {margin-right: 10px;
      img {width:180px; height: 68px}
    }
    .head-nav {
      .head-top{width: 70px;line-height: 30px;
        p {font-size: $font-sizeS; height: 29px}
        b {font-size: 20px;}
      }
    }
  }
  .left-tables {
    .left-t {font-size: 20px}
    .left-p {bottom: 3px }
    .tab-div {width: 648px;}
    p {color: $font-colorThree;font-size: $font-sizeS;padding-left: 8px;}
    td {font-size: $font-sizeSM;padding: 0px 0px 3px 8px;}
    .logo {width: 16px;height: 16px;}
    .logo-bj {width: 30px;height: 17px;display: inline-block;text-align: center;line-height: 17px;margin-right: 2px;}
  }
  .right-top {margin: 10px 0px 0px 8px;
    .box-icon {top: 30px;
      .icon {
        .icon-img {width: 33px;height: 33px;}
      }
    }
    .box-logo {margin-right: 10px;
      .logo-icon {
        img{width: 47px; height:47px;}
      }
    }
    .logo-tit {height: 20px;padding: 1px 10px;margin-left: 5px;margin-top: 2px; font-size: 12px}
    .car-num {font-size: $font-sizeM}
    .car-info {font-size: $font-sizeS;}
  }
  .right-tabs {font-size: $font-sizeSM;
    .box {margin-bottom: 5px;}
  }

  .box-top {margin: 0px 8px 5px 8px;
    .tit {
      .tit-col {width:5px;height:16px;}
      .tit-tit {font-size: $font-sizeS;}
    }
    .fwgd { font-size: $font-sizeSM;margin: 0px 0px 3px 0px;
      .tab-fwgd {
        .fwgd-head {line-height: 20px;}
        .fwgd-sp {padding: 0px;}
      }
    }
  }
  .main-copy {font-size: 12px;}

}

/*  1440 分辨率的显示器 */
@media screen and (min-width:1400px) and (max-width:1500px) {
  //.head-nav {background: linear-gradient(to right, rgb(5,30,72) , rgba(15,26,64,0.5));display: flex;
  //  .head-top{width: 108px;
  //    p {font-size: 15px;}
  //  }
  //}
  //.title-table {min-height: 34%;}
}

/*  1680 分辨率的显示器 */
//@media screen and (min-width:1300px) and (max-width:1400px) {
//  .header-nav { width: 1070px;}
//  .header-top {width: 120px; p{font-size: 19px;} b{font-size: 24px;}}
//}
